import { useState, useEffect } from "react";
// 这种样式写法，相当于vue中scoped
// 可以让样式只对当前组件生效
import styles from "./index.module.css";

console.log(styles);

/*
  useState 用来定义状态数据
  useEffect 用来模拟使用生命周期
*/

function FuncComp() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  // 用法一: 初始化渲染和更新阶段触发
  // useEffect(() => {
  //   console.log("useEffect");
  // });

  // 用法二：初始化渲染触发
  // useEffect(() => {
  //   console.log("useEffect");
  // }, []);

  // 用法三
  // useEffect(() => {
  //   console.log("useEffect");
  // }, [count]);

  // useEffect(() => {
  //   console.log("useEffect");
  //   return () => {
  //     // 相当于componentWillUpdate 和 componentWillUnmount
  //     console.log("useEffect 内部函数");
  //   };
  // }, [count]);

  // useEffect(() => {
  //   const timeId = setInterval(() => {
  //     console.log(111);
  //   }, 1000);
  //   return () => {
  //     clearInterval(timeId);
  //   };
  // }, []);

  return (
    <>
      <div className={styles.title}>FuncComp {count}</div>
      <button className={styles.btn} onClick={handleClick}>
        更新
      </button>
    </>
  );
}

export default FuncComp;
